<template>
    <SearchForm v-if="CommonStore.showSearch" :FormValue="TestTubeStore.searchForm" :FormConfig />

    <!-- <a-input-group compact v-if="!CommonStore.showSearch" style="margin: 5px 0;" class="searchCard">
        <a-radio-group v-model:value="TestTubeStore.searchForm.TableKey" button-style="solid" @change="changeRadio">
            <a-radio-button value="out">取样</a-radio-button>
            <a-radio-button value="put">放样</a-radio-button>
        </a-radio-group>
        <a-select allowClear style="width:55%" :options="CommonStore.deviceOptions"
            v-model:value="TestTubeStore.searchForm.serial" placeholder="设备名称" />
        <a-button @click="changeRadio">
            <template #icon>
                <SearchOutlined />
            </template>
</a-button>
<a-button @click="exportFormRef.open = true">
    <template #icon>
                <VerticalAlignBottomOutlined />
            </template>
</a-button>
</a-input-group> -->


    <a-card>
        <a-spin :spinning="TestTubeStore.loading">
            <a-table :scroll bordered :pagination="TestTubeStore.searchForm"
                :columns="TestTubeStore.searchForm.TableKey == 'out' ? outColumns : putColumns"
                :dataSource="TestTubeStore.searchForm.TableKey == 'out' ? TestTubeStore.outTableData : TestTubeStore.putTableData"
                @change="TestTubeStore.searchForm.TableKey == 'out' ? TestTubeStore.getOutTableData() : TestTubeStore.getPutTableData()">
                <template #bodyCell="{ text, record, index, column }">
                    <template v-if="column.dataIndex === 'outUrl'">
                        <a-image class="tableImg" :src="record.outUrl" :preview="{ src: record.outUrl }" />
                        <!-- <a-image class="tableImg" :src="record.outUrl" :preview="{ src: record.outUrl }" /> -->
                        <Btn type="link" @click="() => { outInfoRef.open = true; TestTubeStore.getOutInfo(record) }">详情
                        </Btn>
                    </template>
                    <template v-if="column.dataIndex === 'putUrl'">
                        <a-image class="tableImg" :src="record.putUrl" :preview="{ src: record.putUrl }" />
                        <!-- <a-image class="tableImg" :src="record.putUrl" :preview="{ src: record.putUrl}" /> -->
                    </template>
                </template>
            </a-table>
        </a-spin>
    </a-card>

    <!-- 导出 -->
    <ModalForm ref="exportFormRef" type="export"
        :okFn="TestTubeStore.searchForm.TableKey == 'out' && TestTubeStore.exportForm.isExportAll ? TestTubeStore.exportOutInfo : TestTubeStore.searchForm.TableKey == 'out' ? TestTubeStore.exportOutTableData : TestTubeStore.exportPutTableData"
        :FormValue="TestTubeStore.exportForm" :FormConfig="exportForm" :rules="exportRules">
        <template v-if="TestTubeStore.searchForm.TableKey == 'out'">
            <a-checkbox v-model:checked="TestTubeStore.exportForm.isExportAll">是否导出取样详情</a-checkbox>
        </template>
    </ModalForm>

    <ModalTableCom ref="outInfoRef" width="70%" :footer="null" :changeFn="TestTubeStore.getOutInfo"
        :pagination="TestTubeStore.searchOutInfo" :dataSource="TestTubeStore.outInfoData" :columns="infoColumns"
        :cancelFn="() => { TestTubeStore.searchOutInfo.current = 1; TestTubeStore.searchOutInfo.pageNo = 1 }">
        <template #bodyCell="{ text, record, index, column }">
            <template v-if="column.dataIndex === 'putUrl'">
                <a-image class="tableImg" :src="record.putUrl" :preview="{ src: record.putUrl }" />
            </template>
        </template>
    </ModalTableCom>

</template>
<script lang='ts' setup>
import { SearchOutlined, VerticalAlignBottomOutlined } from '@ant-design/icons-vue';
import { onUnmounted, provide, ref, inject, onMounted, type Ref, watch, isReactive, watchEffect } from 'vue';

import { useCommon } from '@/stores/Common';
import { useTestTube } from '@/stores/TestTube'
import { searchConfig, exportConfig, outColumns, putColumns, infoColumns, searchSelfConfig } from '@/config/TestTube';

import { createForm } from '@/utils/CreateForm'
import { createBtns } from '@/utils/createPermissionBtns'

import { debounce } from 'lodash'
import { useTableScroll } from '@/utils/GetTableScroll';
const CommonStore = useCommon()
const TestTubeStore = useTestTube()


const { FormConfig: exportForm, FormRules: exportRules } = new createForm(exportConfig)

TestTubeStore.getOutTableData()
const scroll = useTableScroll('searchCard')


const FormConfig = ref()
const exportFormRef = ref()
const outInfoRef = ref()




watchEffect(() => {
    FormConfig.value = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'left', layout: 'inline', labelCol: { span: 5 } },).FormConfig
})

// watch(() => searchSelfConfig, (newVal, oldVal) => {
//     FormConfig.value = new createForm(CommonStore.department != '检验科' ? searchSelfConfig : searchConfig, { labelAlign: 'left', layout: 'inline', labelCol: { span: 5 } },).FormConfig
// }, { deep: true, immediate: true })



provide('permissionBtns', createBtns({
    query: debounce(() => {
        TestTubeStore.searchForm.current = 1
        TestTubeStore.searchForm.pageNo = 1
        TestTubeStore.searchForm.TableKey == 'out' ? TestTubeStore.getOutTableData() : TestTubeStore.getPutTableData()
    }, 1000),
    exportAll: () => exportFormRef.value.open = true,
}))


const changeRadio = () => {
    TestTubeStore.searchForm.pageNo = 1
    TestTubeStore.searchForm.TableKey == 'out' ? TestTubeStore.getOutTableData() : TestTubeStore.getPutTableData()
}


onUnmounted(() => {
    TestTubeStore.$reset()
})

</script>
<style lang='scss' scoped>
@media screen and (max-width:768px) {
    :deep(.tableImg) {
        width: 40px;
        height: 40px;
    }
}

@media screen and (min-width:768px) {
    :deep(.tableImg) {
        width: .5rem;
        height: .5rem;
    }
}
</style>